<template>
  <div class="list-show" :id="props.id">
    <slot></slot>
  </div>
</template>
<script setup>
import { onMounted, ref, onBeforeUnmount, nextTick } from "vue";
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
const timeinternal = ref(null);
const isReachButtom = ref(false);

onMounted(() => {
  nextTick(() => {
    let dom = document.getElementById(props.id);
    timeinternal.value = setInterval(() => {
      autocycle(dom);
    }, 5000);
  });
});

const autocycle = (dom) => {
  let scrollTop = dom.scrollTop;
  let scrollHeight = dom.scrollHeight;
  let offsetHeight = Math.ceil(dom.getBoundingClientRect().height);
  let currentHeight = scrollTop + offsetHeight;
  // console.log(currentHeight, scrollHeight);
  if (currentHeight < scrollHeight && isReachButtom.value) {
    isReachButtom.value = false;
  }
  if (isReachButtom.value) {
    return;
  }
  if (currentHeight >= scrollHeight - 3) {
    isReachButtom.value = true;
    //可视高度+滚动高度 + 距离底部的触发距离>=实际高度
    console.log("触底");
    dom.scrollTop = 0;
  } else {
    dom.scrollTo({
      top: dom.scrollTop + 170,
      behavior: "smooth",
    });
  }
};
onBeforeUnmount(() => {
  clearInterval(timeinternal.value);
});
</script>
<style lang="scss" scoped>
.list-show {
  box-sizing: border-box;
  overflow: auto;
  // background: #192d8e;
  // height: calc(100vh - 130px);
  word-wrap: break-word;
  margin:  0 0;
  white-space: pre-line;
}
</style>
